<template>
  <el-dialog v-model="visible" height="10cm" title="打印预览">
    <!-- 表单是否显示 -->
    <div class="tagBox">
      <vue-easy-print tableShow ref="easyPrintRef">
        <div id="pdf-view">
          <canvas v-for="page in pdfPages" :key="page" id="pdfCanvas" />
          <div id="text-view"></div>
        </div>
      </vue-easy-print>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm"> 去打印 </el-button>
        <el-button @click="onCancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, nextTick } from "vue";
// import Vue3Barcode from "vue3-barcode";
// import VueQrcode from "vue-qrcode";
// import vueEasyPrint from "vue-easy-print";
// import * as pdfjsViewer from "pdfjs-dist/web/pdf_viewer.js";
// import "pdfjs-dist/web/pdf_viewer.css";
// import * as PDF from "pdfjs-dist";

const easyPrintRef = ref();
const visible = ref(false);

// const pdfPath = ref();
const pdfPages = ref(1);

const submitForm = () => {
  easyPrintRef.value.print();
  visible.value = false;
};

const onCancel = () => {
  visible.value = false;
};

// const renderPage = (num) => {
//   pdfDoc.getPage(num).then((page) => {
//     const canvas = document.getElementById("pdfCanvas");
//     const ctx = canvas.getContext("2d");
//     const viewport = page.getViewport({ scale: 2 });
//     canvas.width = viewport.width;
//     canvas.height = viewport.height;
//     const renderContext = {
//       canvasContext: ctx,
//       viewport,
//     };
//     page.render(renderContext);
//   });
// };
// const loadFile = (url) => {
//   PDF.getDocument({
//     url,
//     cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.16.105/cmaps/",
//     cMapPacked: true,
//   }).promise.then((pdf) => {
//     pdfDoc = pdf;
//     // 获取pdf文件总页数
//     pdfPages.value = pdf.numPages;
//     nextTick(() => {
//       renderPage(1); // 从第一页开始渲染
//     });
//   });
// };

const doPrint = (val) => {
  var ordonnance = document.getElementById(val).contentWindow;
  setTimeout(() => {
    ordonnance.print();
  }, 100);
};

const PrintBtnClick = (record) => {
  const blob = new Blob([record], { type: "application/pdf" });
  var date = new Date().getTime();
  var ifr = document.createElement("iframe");
  ifr.style.frameborder = "no";
  ifr.style.display = "none";
  ifr.style.pageBreakBefore = "always";
  ifr.setAttribute("id", "printPdf" + date);
  ifr.setAttribute("name", "printPdf" + date);
  ifr.src = window.URL.createObjectURL(blob);
  document.body.appendChild(ifr);
  doPrint("printPdf" + date);
  window.URL.revokeObjectURL(ifr.src); // 释放URL 对象
};

const openDialog = (str) => {
  visible.value = true;
  // const blob = new Blob([str], { type: "application/pdf" });
  // const blob = new Blob([str], { type: "application/pdf" });
  // printUrl.value = window.URL.createObjectURL(str);
  // printUrl.value = str;
  nextTick(() => {
    PrintBtnClick(str);
  });
};

defineExpose({
  openDialog,
});
</script>
<style lang="scss" scoped></style>
